<template>
  <div class="intelligent-robot" :class="{ 'is-speaking': isSpeaking, 'is-thinking': isThinking }">
    <div class="robot-container">
      <!-- 外圈光环 -->
      <div class="outer-ring"></div>
      <div class="middle-ring"></div>
      
      <!-- 机器人主体 -->
      <div class="robot-body">
        <!-- 机器人头部 -->
        <div class="robot-head">
          <div class="robot-face">{{ robotEmoji }}</div>
          
          <!-- 状态指示器 -->
          <div v-if="isThinking" class="status-indicator thinking"></div>
          <div v-if="isExcited" class="status-indicator excited"></div>
          <div v-if="isSpeaking" class="status-indicator speaking"></div>
        </div>
        
        <!-- 机器人身体 -->
        <div class="robot-torso">
          <div class="chest-light" :class="{ active: isActive }"></div>
        </div>
      </div>
      
      <!-- 悬浮粒子 -->
      <div 
        v-for="i in 8" 
        :key="i"
        class="floating-particle"
        :style="getParticleStyle(i)"
      ></div>
    </div>
    
    <!-- 机器人名称 -->
    <div class="robot-name">
      <div class="name-badge">
        <span class="name-text">{{ robotName }}</span>
        <span class="status-text">{{ statusText }}</span>
      </div>
    </div>

    <!-- 语音波纹 -->
    <div v-if="isSpeaking" class="voice-waves">
      <div 
        v-for="i in 5" 
        :key="i"
        class="wave-bar"
        :style="{ height: `${waveHeights[i] || 20}px`, animationDelay: `${i * 0.1}s` }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IntelligentRobot',
  props: {
    robotName: {
      type: String,
      default: '小旦智能管家'
    },
    isActive: {
      type: Boolean,
      default: true
    },
    isSpeaking: {
      type: Boolean,
      default: false
    },
    isThinking: {
      type: Boolean,
      default: false
    },
    isExcited: {
      type: Boolean,
      default: false
    },
    status: {
      type: String,
      default: 'online'
    }
  },
  data() {
    return {
      robotEmojis: ['🤖', '😊', '🤔', '😄', '😎'],
      currentEmojiIndex: 0,
      waveHeights: [20, 35, 25, 40, 30]
    }
  },
  computed: {
    robotEmoji() {
      if (this.isThinking) return '🤔'
      if (this.isExcited) return '😄'
      if (this.isSpeaking) return '😊'
      return '🤖'
    },
    statusText() {
      if (this.isThinking) return '思考中...'
      if (this.isSpeaking) return '播报中...'
      if (this.isExcited) return '激动中!'
      if (this.isActive) return '在线服务'
      return '待机中'
    }
  },
  methods: {
    getParticleStyle(index) {
      const angle = (360 / 8) * index
      const radius = 120 + Math.sin(Date.now() / 1000 + index) * 20
      const x = Math.cos(angle * Math.PI / 180) * radius
      const y = Math.sin(angle * Math.PI / 180) * radius
      
      return {
        transform: `translate(${x}px, ${y}px)`,
        animationDelay: `${index * 0.2}s`,
        animationDuration: `${3 + Math.random() * 2}s`
      }
    },
    
    updateWaveHeights() {
      if (this.isSpeaking) {
        this.waveHeights = this.waveHeights.map(() => 
          20 + Math.random() * 40
        )
      }
    },
    
    startEmotionCycle() {
      setInterval(() => {
        if (!this.isThinking && !this.isSpeaking && !this.isExcited) {
          this.currentEmojiIndex = (this.currentEmojiIndex + 1) % this.robotEmojis.length
        }
      }, 5000)
    }
  },
  
  watch: {
    isSpeaking(newVal) {
      if (newVal) {
        this.waveInterval = setInterval(this.updateWaveHeights, 150)
      } else {
        clearInterval(this.waveInterval)
      }
    }
  },
  
  mounted() {
    this.startEmotionCycle()
  },
  
  beforeUnmount() {
    if (this.waveInterval) {
      clearInterval(this.waveInterval)
    }
  }
}
</script>

<style scoped>
.intelligent-robot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.robot-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}

/* 光环动画 */
.outer-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #00f5ff, #0ea5e9, #8b5cf6, #00f5ff);
  animation: rotate 8s linear infinite;
  opacity: 0.3;
}

.middle-ring {
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background: linear-gradient(45deg, #8b5cf6, #ec4899, #f59e0b, #8b5cf6);
  animation: rotate 6s linear infinite reverse;
  opacity: 0.4;
}

/* 机器人主体 */
.robot-body {
  position: absolute;
  inset: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00f5ff, #0ea5e9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 0 30px rgba(0, 245, 255, 0.5),
    inset 0 0 20px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.robot-head {
  position: relative;
  font-size: 4rem;
  margin-bottom: 10px;
}

.robot-face {
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}

.robot-torso {
  position: relative;
}

.chest-light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.chest-light.active {
  opacity: 1;
  animation: pulse 2s ease-in-out infinite;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

/* 状态指示器 */
.status-indicator {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  top: -8px;
  right: -8px;
}

.status-indicator.thinking {
  background: #f59e0b;
  animation: pulse 1s ease-in-out infinite;
}

.status-indicator.excited {
  background: #ef4444;
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.status-indicator.speaking {
  background: #10b981;
  animation: pulse 0.5s ease-in-out infinite;
}

/* 悬浮粒子 */
.floating-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0, 245, 255, 0.6);
  top: 50%;
  left: 50%;
  animation: float 4s ease-in-out infinite;
}

/* 机器人名称 */
.robot-name {
  margin-bottom: 20px;
}

.name-badge {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 245, 255, 0.3);
  border-radius: 25px;
  padding: 8px 20px;
  text-align: center;
}

.name-text {
  display: block;
  color: #00f5ff;
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 2px;
}

.status-text {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8rem;
}

/* 语音波纹 */
.voice-waves {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 3px;
  height: 50px;
}

.wave-bar {
  width: 4px;
  background: linear-gradient(to top, #00f5ff, #0ea5e9);
  border-radius: 2px;
  animation: wave 0.6s ease-in-out infinite alternate;
}

/* 机器人状态动画 */
.intelligent-robot.is-speaking .robot-body {
  animation: speaking 1s ease-in-out infinite;
  box-shadow: 
    0 0 40px rgba(0, 245, 255, 0.8),
    inset 0 0 20px rgba(255, 255, 255, 0.2);
}

.intelligent-robot.is-thinking .robot-body {
  animation: thinking 2s ease-in-out infinite;
}

/* 动画关键帧 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.1); }
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes float {
  0%, 100% { transform: translate(var(--x, 0), var(--y, 0)) scale(1); }
  50% { transform: translate(var(--x, 0), var(--y, 0)) scale(1.2); }
}

@keyframes wave {
  from { height: 20px; }
  to { height: var(--wave-height, 40px); }
}

@keyframes speaking {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes thinking {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.02) rotate(-1deg); }
  75% { transform: scale(1.02) rotate(1deg); }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .robot-container {
    width: 150px;
    height: 150px;
  }
  
  .robot-head {
    font-size: 3rem;
  }
}
</style> 